<template>
  <div class="col-sm-12">
    <div class="card-box">
      <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 30%;">
        <el-form-item prop="name" >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUsers()">查询</el-button>
        </el-form-item>
      </el-form>
        <el-button size="medium" type="success" @click="selectUser()">拉取选中的员工</el-button>
      <br>
      <br>
      <table class="table">
        <thead>
          <tr>
            <th style="width:20px"></th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>部门</th>
            <th>身份</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <input type="checkbox" style="margin-top:10px" :value="item.userId" v-model="checkVal">
            <td>{{item.userNumber}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.department}}</td>
            <td>{{item.permission}}</td>
          </tr>
        </tbody>
      </table>
      <br>
      <div align="center" >
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="parseInt(this.total)">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkVal: [],
        ps: this.$store.state.permission,
        ids: '',
        currentPage: 1, //初始页
        pagesize: 6,
        ruleForm: {
          name: '',
        },
      };
    },
    props: ['data', 'GroupId','total'],
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function(size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        this.$parent.loadUsers(this.currentPage,this.pagesize);
      },
      selectUser() {
        let Ids = JSON.stringify(this.checkVal);
        let AdminId = this.$store.state.userId;
        this.$axios.post('/api/Group/SelectUserIntoGroup?AdminId=' + AdminId + '&GroupId=' + this.GroupId, Ids)
          .then(res => {
            console.log(res);
            this.$notify.success({
              title: '成功',
              message: '拉取用户成功',
            });
            this.$router.push({
              path: '/manage/groupinfo',
              query: {
                AdminId: AdminId,
              }
            })
          })
          .catch(err => {
            console.log(err)
          });
      },
      searchUsers() {
        let userList = [];
        let sum='';
          this.$axios.get('/api/taoyun/v1/Admin/userManage/SearchStaffByName', {
              params: {
                name:this.ruleForm.name,
                Department: '',
                page: 1,
                size: 6,
              },
            })
            .then(res => {
             userList = res.data.data.list;
             sum=res.data.data.total;
             this.$parent.set_userlist(userList,sum);
            })
            .catch(err => {
              console.log(err.response)
            })
      },
    },
  };
</script>
<style scoped>
  .popoverBackB {
    /* #303133是el-tooltip的背景色 */
    background-color: transparent !important;
  }

  .popoverBackB .popper__arrow::after {
    /* 注意：placement位置不同，下面的属性不同 */
    border-bottom-color: transparent !important;
  }
</style>
